<template>
    <v-menu location="bottom">
      <template #activator="{ props }">
        <v-btn icon v-bind="props" variant="text">
          <v-badge v-if="unreadCount > 0" color="error" :content="unreadCount">
            <v-icon>mdi-bell-outline</v-icon>
          </v-badge>
          <v-icon v-else>mdi-bell-outline</v-icon>
        </v-btn>
      </template>
  
      <v-card width="300">
        <v-toolbar color="primary" density="compact">
          <v-toolbar-title>通知</v-toolbar-title>
          <v-btn icon @click="markAllAsRead">
            <v-icon>mdi-check-all</v-icon>
          </v-btn>
        </v-toolbar>
        <v-list>
          <v-list-item
            v-for="(item, index) in notifications"
            :key="index"
            :title="item.title"
            :subtitle="item.message"
            :prepend-icon="item.icon"
            @click="handleNotificationClick(item)"
          >
            <template #append>
              <v-icon
                v-if="!item.read"
                color="primary"
                icon="mdi-circle-small"
              />
            </template>
          </v-list-item>
        </v-list>
      </v-card>
    </v-menu>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  
  interface Notification {
    id: number
    title: string
    message: string
    icon: string
    read: boolean
    action?: string
  }
  
  const notifications = ref<Notification[]>([
    {
      id: 1,
      title: '新爬取任务',
      message: '已完成文本数据爬取',
      icon: 'mdi-text-box',
      read: false
    },
    // 其他通知...
  ])
  
  const unreadCount = computed(() => {
    return notifications.value.filter(n => !n.read).length
  })
  
  function markAllAsRead() {
    notifications.value.forEach(n => (n.read = true))
  }
  
  function handleNotificationClick(item: Notification) {
    item.read = true
    // 处理通知点击逻辑
  }
  </script>